<template>
	<view class="mapBox" :style="{height:mapheight}">
		<!-- <map class="mapBox" id="mapId" :controls="controls" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude"
		 :markers="markers" scale="14" @tap="tapMap">
		</map> -->
		<block v-if="src">
			<iframe id="mapPage" width="100%" height="100%" frameborder='0' :src="src">
			</iframe>  
		</block>
		
	</view>
</template>

<script>
	var handler
	export default {
		data() {
			return {
				mapheight: '',
				controls: [],
				latitude: '',
				longitude: '',
				markers: [],
				src:''
			}
		},
		onLoad(op) {
			var that = this
			if(op.lat){
				this.src = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&coord=${op.lat},${op.lng}&key=NMKBZ-NN3KR-OYQWQ-WPSXT-6SX6V-HIFFU&referer=msk`
			}else{
				this.src = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=NMKBZ-NN3KR-OYQWQ-WPSXT-6SX6V-HIFFU&referer=msk`
			}
		},
		onReady() {
			this.getHeight()
			// this.mapContext = uni.createMapContext('mapId', this)
			var that = this
			handler = function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = event.data;
				if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
					that.$config.loc = loc
					uni.navigateBack()
					
				}
			};
			window.addEventListener('message', handler, false);
		},
		onUnload() {
			window.removeEventListener('message',handler, false)
		},
		methods: {
			chooseMap(e) {
				console.log(e)
			},
			tapMap(e) {
				console.log(e)
			},
			toself() {
				console.log(this.longitude)
				this.mapContext.moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
					complete: res => {}
				})
			},
			getHeight() {
				var that = this
				uni.getSystemInfo({
					success(res) {
						var windowHeight = res.windowHeight - 0
						var windowWidth = res.windowWidth - 0
						let view2 = uni.createSelectorQuery().in(that).select(".mapBox");
						view2.fields({
							size: true,
							scrollOffset: true,
							rect: true
						}, data => {
							that.mapheight = windowHeight - data.top - 0 + 'px'
							that.controls = [{
								//在地图上显示控件，控件不随着地图移动
								id: 5, //控件id
								iconPath: '/static/image/tolocation.png', //显示的图标
								position: { //控件在地图的位置
									left: windowWidth - 50,
									top: windowHeight - data.top - 200,
									width: 40,
									height: 40
								},
								clickable: true
							}]
						}).exec();
					}
				})
			},
		}
	}
</script>

<style scoped>
	.mapBox {
		width: 100%;
	}
</style>
